<template>
  <div class="appoint-plan">
    <div class="plan-title">接诊计划</div>
    <!-- <div class="select-time-info bgwhite">
      <div class="select-time-header">
        <div class="time-harfday">
          <div>日期</div>
          <div>上午</div>
          <div>下午</div>
          <div>晚间</div>
        </div>
        <div class="time-fullday" style="overflow:scroll;">
          <div ref="scrollWrapper">
            <ul :style="'width:'+scrollWrapperWidth+'px;'">
              <li
                v-for="(day, i) in days"
                :class="['head', i===0 ? 'headActive' : '']"
                :key="day.orderDate"
              >
                <div>{{day.orderWeek2}}</div>
                <div>{{day.orderDate1}}</div>
              </li>
              <li
                v-for="item in timeAM"
                :key="JSON.stringify(item.selectedSchedule)"
                :class="['foot', item.active ? 'footActive' : '', item.dis ? 'footDis' : '', item.stop ? 'footStop' : '']"
                @click="appoint(item)"
              >
                <div>{{item.name}}</div>
              </li>
              <li
                v-for="item in timePM"
                :key="JSON.stringify(item.selectedSchedule)"
                :class="['foot', item.active ? 'footActive' : '', item.dis ? 'footDis' : '', item.stop ? 'footStop' : '']"
                @click="appoint(item)"
              >
                <div>{{item.name}}</div>
              </li>
              <template v-for="item in timeNight">
                <li
                  :key="JSON.stringify(item.selectedSchedule)"
                  :class="['foot', item.active ? 'footActive' : '', item.dis ? 'footDis' : '', item.stop ? 'footStop' : '']"
                  @click="appoint(item)"
                >
                  <div>{{item.name}}</div>
                </li>
              </template>
            </ul>
          </div>
        </div>
      </div>
    </div> -->
    <ul class="schedulingList">
      <li v-for="(item, i) in schedulingList" :key="i">
        {{item.startTime.slice(0,16)}} -
        {{item.endTime.slice(11,16)}}
      </li>
    </ul>
  </div>
</template>

<script>
import { commonAjaxJson } from "@/api/api";
import { getWeekName } from "@/common/js/util";

export default {
  props: ["schedulingList"],
  data() {
    return {
      scrollWrapperWidth: 400,
      hospitalCode: sessionStorage.hospitalCode || "",
      days: [],
      timeAM: [],
      timePM: [],
      timeNight: []
    };
  },

  mounted() {
    // this.init();
  },

  methods: {
    init() {
      let _this = this;
      this.getTime().then(res => {
        if (res.data.code == 200) {
          let d1 = res.data.data;
          d1.forEach((day, i) => {
            day.orderDate1 = day.date.slice(5);
            day.orderWeek2 = i === 0 ? "今日" : getWeekName(day.week);
            day.activeClass = false;
          });
          this.days = d1;
          this.scrollWrapperWidth = 54 * this.days.length;
          // add AM and PM data
          for (let i = 0; i < this.days.length; i++) {
            this.timeAM.push({
              name: "",
              active: false,
              stop: false,
              dis: false
            });
            this.timePM.push({
              name: "",
              active: false,
              stop: false,
              dis: false
            });
            this.timeNight.push({
              name: "",
              active: false,
              stop: false,
              dis: false
            });
          }

          // this.getSameDay()
          if (this.schedulingList.length > 0) {
            this.days.forEach((day, index) => {
              this.schedulingList.forEach(value => {
                _this.getSameDay(day, index, value);
              });
            });
          }
        }
      });
    },

    getSameDay(day, index, value) {
      let _this = this;
      if (day.date === value.scheduleDate.slice(0, 10)) {
        if (value.timeFlag === 1) {
          if (value.isStop === 1) {
            _this.timeAM.splice(index, 1, { name: "停诊", dis: true });
          } else if (value.scheduleCount === 0) {
            _this.timeAM.splice(index, 1, { name: "约满", dis: true });
          } else {
            _this.timeAM.splice(index, 1, {
              name: "有号",
              active: true,
              selectedSchedule: value
            });
          }
        } else if (value.timeFlag == 2){
          if (value.isStop === 1) {
            _this.timePM.splice(index, 1, { name: "停诊", dis: true });
          } else if (value.scheduleCount === 0) {
            _this.timePM.splice(index, 1, { name: "约满", dis: true });
          } else {
            _this.timePM.splice(index, 1, {
              name: "有号",
              active: true,
              selectedSchedule: value
            });
          }
        }else if (value.timeFlag == 3){
          if (value.isStop === 1) {
            _this.timeNight.splice(index, 1, { name: "停诊", dis: true });
          } else if (value.scheduleCount === 0) {
            _this.timeNight.splice(index, 1, { name: "约满", dis: true });
          } else {
            _this.timeNight.splice(index, 1, {
              name: "有号",
              active: true,
              selectedSchedule: value
            });
          }
        }
      }
    },

    appoint(){

    },

    getTime() {
      // 获取排版周期
      return commonAjaxJson(
        "appointment/listScheduleCycle",
        {
          hospitalCode: this.hospitalCode,
          outpatientType: 1 //门诊1，云诊室2
        },
        true
      );
    }
  }
};
</script>

<style lang="less" scoped>
@import "../../common/css/vars.less";

.plan-title {
  font-size: 1.1em;
  margin: 10px;
  text-align: center;
}
.select-time-info {
  text-align: center;
  border-bottom: 1px solid @color-border;
  .select-time-header {
    flex-wrap: nowrap;
    justify-content: flex-start;
    display: -webkit-flex;
    display: flex;
  }
  .time-harfday {
    border-right: 1px solid @color-border;
    -webkit-flex-grow: 0;
    -webkit-flex-shrink: 0;
    -webkit-flex-basis: 30px;
    div {
      padding: 4px 6px;
      color: #999;
      border-bottom: 1px solid @color-border;
    }
  }
  .time-fullday {
    li {
      float: left;
      width: 54px;
      border-right: 1px solid @color-border;
      border-bottom: 1px solid @color-border;
      padding: 4px;
      height: 51px;
      &.active {
        color: @color-primary;
        background: #ebf8f1;
      }
      &.head {
        border-left: none;
        &.headActive {
          color: @color-primary;
        }
      }
      &.foot {
        line-height: 43px;
        color: #999;
        &.footActive {
          color: @color-primary;
          background: #ebf8f1;
        }
        &.footDis {
          color: @color-gray;
          // background: #d5d5d5;
        }
        &.footStop {
          color: #f60;
        }
      }
    }
  }
  .time-footer {
    text-align: right;
    padding: 1em;
  }
}

.schedulingList{
  text-align:center;
  li{
    line-height: 24px;
    padding: 10px;
    border: 1px solid #eee;

  }
}
</style>